<template>
	<view class="book__item" >
			<view class="book__item__avatar">
				<cover-image class="avatar img"  src="/static/logo.png"></cover-image>
			</view>
			<!-- index*4+i+1)??0 -->
			<view class="rank" :class="[{'front__row':index<3}]">{{index}}</view>
			<view class="book__item__right">
				<view class="book__item__name lineTow">天才医天才医生天才医生天才医生天才医生天才医生天才医生天才医生天才医生天才医生生</view>
				<view class="book__item__utils lineTow">
					<cover-view class="book__item__sort">玄幻脑洞</cover-view>
					<cover-view class="book__item__hot">xxxx万热度</cover-view>
				</view>
			</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		index:{
			type:[String,Number],
			default:"",
		}
	})
	
</script>

<style lang="scss">
	.book__item{
		display: flex;
		gap: 16rpx;
		box-sizing: border-box;
			&__avatar{
				flex-shrink: 0;
				width: 80rpx;
				.avatar{
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
			.rank{
				// color: #ddad80;
				color: black;
				font-weight: bold;
				font-size: 24rpx;
				&.front__row{
					color: #ddad80;
				}
			}
			&__right{
				.book__item__name{
					width: 80%;
					font-weight: bold;
					font-size: 24rpx;
				}
				.book__item__utils{
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin: 10rpx 0;
					
					.book__item__sort{
						color: #d1ac7d;
						font-weight: bold;
					}
				}
			}
			
		
	}
	
</style>